.p8 {
  &.swiper-slide-active {
    .theme {
      -webkit-animation: w 1s;
      -webkit-animation-delay: 1.5s;
      -webkit-animation-timing-function: ease-out;
      -webkit-animation-fill-mode: backwards;
    }
    .act-link, .share-link, .pao-link, .all-link {
      -webkit-animation: w 1s;
      -webkit-animation-delay: 2.5s;
      -webkit-animation-timing-function: ease-out;
      -webkit-animation-fill-mode: backwards;
    }
    .bottom {
      -webkit-animation: w 1.5s;
      -webkit-animation-delay: 3s;
      -webkit-animation-timing-function: ease-out;
      -webkit-animation-fill-mode: backwards;
    }
  }
  a {
    display: block;
  }
  .theme {
    position: absolute;
    width: 640px;
    height: 618px;
    left: 50%;
    margin-left: -320px;
    bottom: 50%;
    margin-bottom: -66px;
    z-index: 13;
    &.theme-AX {
      background: url("../img/slide/p7/place_AX@620x543.png") no-repeat center bottom;
    }
    &.theme-AY {
      background: url("../img/slide/p7/place_AY@630x567.png") no-repeat center bottom;
    }
    &.theme-AZ {
      background: url("../img/slide/p7/place_AZ@539x588.png") no-repeat center bottom;
    }
    &.theme-BX {
      background: url("../img/slide/p7/place_BX@600x578.png") no-repeat center bottom;
    }
    &.theme-BY {
      background: url("../img/slide/p7/place_BY@620x647.png") no-repeat center bottom;
    }
    &.theme-BZ {
      background: url("../img/slide/p7/place_BZ@640x577.png") no-repeat center bottom;
    }
    &.theme-CX {
      background: url("../img/slide/p7/place_CX@640x596.png") no-repeat center bottom;
    }
    &.theme-CY {
      background: url("../img/slide/p7/place_CY@637x617.png") no-repeat center bottom;
    }
    &.theme-CZ {
      background: url("../img/slide/p7/place_CZ@620x588.png") no-repeat center bottom;
    }
  }
  .act-link {
    width: 25px;
    height: 128px;
    position: absolute;
    left: 50%;
    margin-left: -222px;
    bottom: 50%;
    margin-bottom: -366px;
    background: url("../img/slide/p7/act_link@25x128.png") no-repeat 0 0;
    z-index: 15;
  }
  .share-link {
    width: 25px;
    height: 128px;
    position: absolute;
    left: 50%;
    margin-left: 216px;
    bottom: 50%;
    margin-bottom: -366px;
    background: url("../img/slide/p7/share_link@25x128.png") no-repeat 0 0;
    z-index: 15;
  }
  .pao-link {
    width: 138px;
    height: 249px;
    position: absolute;
    left: 50%;
    margin-left: -160px;
    bottom: 50%;
    margin-bottom: -366px;
    background: url("../img/slide/p7/pao_link@138x249.png") no-repeat 0 0;
    z-index: 15;
  }
  .all-link {
    width: 134px;
    height: 250px;
    position: absolute;
    left: 50%;
    margin-left: 30px;
    bottom: 50%;
    margin-bottom: -366px;
    background: url("../img/slide/p7/all_link@134x250.png") no-repeat 0 0;
    z-index: 15;
  }
  .bottom {
    width: 640px;
    height: 90px;
    position: absolute;
    left: 50%;
    margin-left: -320px;
    bottom: -2px;
    background: url("../img/slide/p7/botton@640x90.png") no-repeat 0 0;
  }
}

.share-wrapper {
  position: fixed;
  left: 50%;
  margin-left: -320px;
  top: 0;
  width: 640px;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 1000;
  i {
    position: absolute;
    right: 44px;
    top: 44px;
    width: 516px;
    height: 348px;
    background: url("../img/slide/share@516x348.png") no-repeat 0 0;
  }
}

.rule-wrapper {
  position: fixed;
  left: 50%;
  margin-left: -320px;
  top: 0;
  width: 640px;
  height: 100%;
  z-index: 1000;
  background: rgba(255,255,255,0.8) url("../img/slide/rule@640x1008.png") no-repeat 0 0;
  .close-btn {
    position: absolute;
    left: 80px;
    top: 92px;
    width: 150px;
    height: 150px;
  }
}

.ranks-wrapper {
  position: relative;
  width: 640px;
  height: 4820px;
  background: url("../img/slide/ranks@640x4820.jpg") no-repeat 0 0;
  img {
    width: 81px;
    height: 81px;
    position: absolute;
    top: 466px;
    left: 50%;
    margin-left: -28px;
  }
  .nick {
    width: 200px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 547px;
    left: 50%;
    color: #980707;
    font-size: 24px;
    margin-left: -90px;
  }
  .back-btn {
    position: absolute;
    width: 113px;
    height: 255px;
    left: 50%;
    margin-left: -58px;
    bottom: 191px;
  }
  .pro-txt {
    position: absolute;
    width: 320px;
    height: 269px;
    right: 50%;
    top: 832px;
    &.pro-txt-1 {
      background: url("../img/slide/txt_1.png") no-repeat right top;
    }
    &.pro-txt-2 {
      background: url("../img/slide/txt_2.png") no-repeat right top;
    }
    &.pro-txt-3 {
      background: url("../img/slide/txt_3.png") no-repeat right top;
    }
    &.pro-txt-4 {
      background: url("../img/slide/txt_4.png") no-repeat right top;
    }
    &.pro-txt-5 {
      background: url("../img/slide/txt_5.png") no-repeat right top;
    }
    &.pro-txt-6 {
      background: url("../img/slide/txt_6.png") no-repeat right top;
    }
    &.pro-txt-7 {
      background: url("../img/slide/txt_7.png") no-repeat right top;
    }
    &.pro-txt-8 {
      background: url("../img/slide/txt_8.png") no-repeat right top;
    }
    &.pro-txt-9 {
      background: url("../img/slide/txt_9.png") no-repeat right top;
    }
  }
  .pro-1 {
    display: block;
    position: absolute;
    width: 613px;
    height: 422px;
    left: 50%;
    margin-left: -300px;
    top: 1080px;
  }
  .pro-2 {
    display: block;
    position: absolute;
    width: 613px;
    height: 369px;
    left: 50%;
    margin-left: -300px;
    top: 1500px;
  }
  .pro-3 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 1866px;
  }
  .pro-4 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 2202px;
  }
  .pro-5 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 2545px;
  }
  .pro-6 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 2886px;
  }
  .pro-7 {
    display: block;
    position: absolute;
    width: 613px;
    height: 375px;
    left: 50%;
    margin-left: -300px;
    top: 3220px;
  }
  .pro-8 {
    display: block;
    position: absolute;
    width: 613px;
    height: 328px;
    left: 50%;
    margin-left: -300px;
    top: 3599px;
  }
  .pro-9 {
    display: block;
    position: absolute;
    width: 613px;
    height: 396px;
    left: 50%;
    margin-left: -300px;
    top: 3927px;
  }
}


.ranks-wrapper1 {
  position: relative;
  width: 640px;
  height: 3813px;
  background: url("../img/slide/ranks_all@640x3813.jpg") no-repeat 0 0;
  .back-btn {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 20px;
    top: 20px;
  }
  .more-btn {
    position: absolute;
    width: 94px;
    height: 300px;
    right: 40px;
    top: 156px;
  }
  .pro-1 {
    display: block;
    position: absolute;
    width: 613px;
    height: 422px;
    left: 50%;
    margin-left: -300px;
    top: 485px;
  }
  .pro-2 {
    display: block;
    position: absolute;
    width: 613px;
    height: 369px;
    left: 50%;
    margin-left: -300px;
    top: 900px;
  }
  .pro-3 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 1272px;
  }
  .pro-4 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 1610px;
  }
  .pro-5 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 1950px;
  }
  .pro-6 {
    display: block;
    position: absolute;
    width: 613px;
    height: 339px;
    left: 50%;
    margin-left: -300px;
    top: 2286px;
  }
  .pro-7 {
    display: block;
    position: absolute;
    width: 613px;
    height: 375px;
    left: 50%;
    margin-left: -300px;
    top: 2625px;
  }
  .pro-8 {
    display: block;
    position: absolute;
    width: 613px;
    height: 328px;
    left: 50%;
    margin-left: -300px;
    top: 3005px;
  }
  .pro-9 {
    display: block;
    position: absolute;
    width: 613px;
    height: 396px;
    left: 50%;
    margin-left: -300px;
    top: 3335px;
  }
}
